<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收货地址</title>
		<link rel="icon" href="/img/milogo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="/font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="/CSS/currency.css" />
		<link rel="stylesheet" type="text/css" href="/CSS/reset.css" />
		<link rel="stylesheet" type="text/css" href="/CSS/address.css" />
        <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
	</head>
	<body>

    <th:block th:include="header"/>

		<div class="title">
			<div class="container">
				<a href="/">首页</a> / 收货地址
			</div>
		</div>

		<div class="profile-box">
			<div class="container clearfix">
				<th:block th:include="leftMenu"/>

				<div class="fl profile-right">
					<!-- 右侧 -->
					<div class="infor-box clearfix">
						<div class="order-title">
							<h1>收货地址</h1>
						</div>

						<div class="addAddress-box fl">
							<div class="addAddress">
								<p class="iconfont icon-jiahao-"></p>
								<span>添加新地址</span>
							</div>
						</div>
						
						<div class="address-list">
							<div class="addressBox clearfix">
								<div class="address-label">标签</div>
								<div class="address-name">姓名</div>
								<div class="address-number">手机号</div>
								<div  class="address-address">地址</div>
								<div class="address-detailed">详细地址</div>
								<div class="address-change">
									<span class="address-changeed">修改</span>
									<span class="address-dele">删除</span>
								</div>
							</div>
						</div>
						
						
						
						
					</div>
				</div>
			</div>
		</div>

		<!-- 添加地址弹出框 -->
		<div class="alert-box">
			<div class="alert">
				<p class="alert-title clearfix">
					<span class="title">添加收获地址</span>
					<span class="close">x</span>
				</p>
                <form class="layui-form" lay-filter="addForm">
				<div class="alert-box-content">
					<div class="alert-bottom-box name-box">
						<label for="input-name" class="plaLabel pla-name">姓名</label>
						<input id="input-name" name="man" type="text" class="input input-name" />
					</div>
					<div class="alert-bottom-box number-box">
						<label for="input-number" class="plaLabel pla-number">手机号</label>
						<input id="input-number" name="tel" type="text" class="input input-number" />
					</div>
					<div class="alert-bottom-box choice-box layui-form-item" id="area-picker">
                        <div class="layui-input-inline" style="width: 200px;">
                            <select name="province" class="province-selector" data-value="山东省" lay-filter="province-1">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <select name="city" class="city-selector" data-value="青岛市" lay-filter="city-1">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <select name="area" class="county-selector" data-value="城阳区" lay-filter="county-1">
                                <option value="">请选择区</option>
                            </select>
                        </div>
					</div>
					<div class="alert-bottom-box address-box">
						<label for="input-address" class="plaLabel pla-address">详细地址</label>
						<input id="input-address" name="address" type="text" class="input input-address" />
					</div>


					<div class="alert-bottom-box addressLabel-box">
						<label for="input-addressLabel" class="plaLabel pla-addressLabel">地址标签</label>
						<input id="input-addressLabel" name="tag" type="text" class="input input-addressLabel" />
					</div>
				</div>
				<div class="determine-box">
					<button id="determine" type="button" class="determine">确定</button>
					<button id="cancel" type="reset" class="cancel">重置</button>
				</div>
                </form>
			</div>
		</div>
        <th:block th:include="footer"/>
		<script src="/JS/currency.js"></script>
		<script src="/JS/address.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/JS/lay-config.js"></script>
    <script>
        layui.use(["layer",'form','layarea'],function(){
            var $ = layui.jquery;
            var form = layui.form;
            var layarea = layui.layarea;
            $(".addAddress").on("click",function(){
                $(".alert-box").show();
                layarea.render({
                    elem: '#area-picker',
                    change: function (res) {

                    }
                });
                form.render();
            });

            $("#determine").on("click",function(){
               var data = form.val("addForm");
               console.log(data);
               $.post("/personal/address/save",data,function(){
                  layer.msg("保存成功");
                   $(".close").click();
               });
            });

            $(".close").on("click",function(){
                $(".alert-box").hide();
                $("#cancel").click();
            });
        });
    </script>
	</body>
</html>
